<template>
  <div class="river-top">
    <div class="river-top-head">
      <span class="title-font">计算单元信息</span>
      <div class="top-btn-box">
        <!-- <el-button type="primary" class="btn-item">构建计算单元</el-button>
        <el-button type="primary" class="btn-item">导入计算单元</el-button>
        <el-button type="success" class="btn-item">保存</el-button>-->
        <!-- <el-button type="success" class="btn-item" @click="handleAdd">导入计算单元</el-button> -->
      </div>
    </div>
    <div class="river-top-list">
      <div class="table-box">
        <el-table border :data="state.unitTableData" style="width: 100%" height="100%">
          <el-table-column prop="clcd" label="单元编码" align="center" />
          <el-table-column prop="clnm" label="单元名称" align="center" />
          <el-table-column prop="area" label="单元面积" align="center" />
          <el-table-column fixed="right" label="操作" width="200" align="center">
            <template #default="{ row }">
              <el-button link type="primary" size="small" @click="handleClickPosition(row)"
                >定位</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- <div class="page-box">
        <pagi-nation :pageSize="page.pageSize" :pageTotal="page.total" @pageFunc="pageFunc">
        </pagi-nation>
      </div>-->
    </div>
  </div>
  <div class="river-bottom">
    <span class="title-font">参数配置信息</span>
    <div class="config-box">
      <!-- <div class="config-box-head"> -->
      <!-- <div class="config-plan-left"> -->
      <!-- <span class="config-plan-title">参数方案</span> -->
      <!-- <div v-if="newConfig == 0">
            <el-select v-model="paramsScheme" class="m-2" placeholder="参数方案">
              <el-option
                v-for="item in paramsSchemeArr"
                :key="item.id"
                :label="item.scName"
                :value="item.id"
              />
            </el-select>
          </div>
          <div v-else>
            <el-input type="primary" v-model="newConfigName"></el-input>
          </div> -->
      <!-- <span class="plan-option" v-if="activePlan === 'second' ? true : false">选择</span> -->
      <!-- </div> -->
      <!-- <div class="config-plan-right"> -->
      <!-- <el-button type="primary" class="btn-pading" @click="handleImportParams(1)"
            >新建</el-button
          > -->
      <!-- <el-button type="primary" class="btn-pading" @click="handleClosed" v-else>取消</el-button> -->
      <!-- <el-button type="warning" class="btn-pading">复制</el-button> -->
      <!-- <el-button type="success" class="btn-pading" @click="saveConfig" v-if="newConfig != 0">保存</el-button> -->
      <!-- <el-button type="danger" class="btn-pading">删除</el-button> -->
      <!-- </div> -->
      <!-- </div> -->
      <div class="config-box-head head-othe">
        <div class="config-plan-left">
          <span class="config-plan-title">预报断面参数方案</span>
          <div v-if="newConfig == 0">
            <el-select
              v-model="state.schemeName"
              @change="changeVal"
              class="m-2"
              placeholder="参数配置方案"
            >
              <el-option
                v-for="item in state.paramsOptions"
                :key="item.id"
                :label="item.scName"
                :value="item.id"
              />
            </el-select>
          </div>
          <div v-else>
            <el-input type="primary" v-model="newConfigName"></el-input>
          </div>
          <!-- <span class="plan-option" v-if="activePlan === 'second' ? true : false">选择</span> -->
        </div>
        <div class="config-plan-right">
          <el-button type="primary" class="btn-pading" @click="handleEditParamsConfig(1)"
            >新建</el-button
          >
          <!-- <el-button type="primary" class="btn-pading" @click="handleClosed" v-else>取消</el-button> -->
          <el-button type="success" class="btn-pading" @click="handleEditParamsConfig(2)"
            >编辑</el-button
          >
          <!-- <el-button type="success" class="btn-pading" @click="saveConfig" v-if="newConfig != 0">保存</el-button> -->
          <el-button type="danger" class="btn-pading" @click="delBtn">删除</el-button>
          <!-- <el-button type="primary" class="btn-pading" @click="handleImportParams(1)"
            >批量导入参数</el-button
          > -->
        </div>
      </div>
      <div class="config-tabs">
        <el-tabs v-model="activePlan" class="demo-tabs">
          <el-tab-pane label="雨量站点配置" name="first">
            <div class="rainfall-config-box">
              <div class="rain-left">
                <div class="computed-title">计算单元编码</div>
                <div class="computed-main">
                  <div
                    :class="['unit-item', currentCd == index ? 'active' : '']"
                    v-for="(item, index) in state.unitTableData"
                    :key="index"
                    @click="handleClickUnit(item, index)"
                  >
                    <span class="basin-code">{{ item.clcd }}</span>
                    <!-- <span class="basin-location">定位</span> -->
                  </div>
                </div>
              </div>
              <div class="rain-right">
                <div class="rainfall-head">
                  <span class="rainfall-head-title">计算单元流域关联雨量站</span>
                  <!-- <el-button type="primary" @click="handleAdd">导入</el-button> -->
                  <el-button type="primary" @click="selectStation" v-if="newConfig != 0"
                    >添加雨量站</el-button
                  >
                </div>
                <div class="rainfall-table-box">
                  <el-table border :data="state.rainTableData" style="width: 100%" height="100%">
                    <!-- <el-table-column prop="clcd" label="计算站点编码" width="160" show-overflow-tooltip align="center" /> -->
                    <el-table-column
                      prop="stcd"
                      label="站点编码"
                      show-overflow-tooltip
                      align="center"
                    />
                    <el-table-column
                      prop="stnm"
                      label="站点名称"
                      show-overflow-tooltip
                      align="center"
                    />
                    <el-table-column
                      prop="pw"
                      label="计算权重"
                      show-overflow-tooltip
                      align="center"
                    />
                    <el-table-column fixed="right" label="操作" width="150" align="center">
                      <template #default="{ row }">
                        <!-- <el-button link type="primary" size="small">定位</el-button> -->
                        <el-button
                          link
                          type="warning"
                          size="small"
                          @click="handleSettongWeight(row)"
                          >设置权重</el-button
                        >
                        <!-- <el-button link type="danger" size="small">删除</el-button> -->
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="模型参数" name="second">
            <div class="btn-box">
              <!-- <el-button
                type="primary"
                @click="handleAddParams"
                v-if="!state.paramsFlag"
                >新建</el-button
              > -->
              <el-button type="primary" @click="handleCloseParams" v-if="state.paramsFlag"
                >取消</el-button
              >
              <el-button type="success" @click="handleEditParams" v-if="!state.paramsFlag"
                >编辑</el-button
              >
              <el-button type="success" @click="handleSaveParams" v-else>保存</el-button>
              <!-- <el-button type="primary" class="btn-pading" @click="handleImportParams(2)">单断面模型参数导入</el-button> -->
            </div>
            <configParagm
              ref="editorRef"
              :paragmId="paraId"
              :unitTableData="state.unitTableData"
            ></configParagm>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
  <params-config-plan ref="paramsConfigPlanRef" @saveParamsPlan="saveConfig" />
  <!-- 弹窗 -->
  <importFile :dialogVisible="showDialog" @closeDialog="closeDig" />
  <params-impot-dialog ref="paramsImpotDialogRef" @afterClosing="paramSchemes(blkcd)" />
  <station
    :dialogVisible="showStationDialog"
    @closeDialog="closeDig"
    @handleSelect="handleSelect"
  />
  <el-dialog
    title="修改雨量站权重"
    v-model="weightVal"
    width="30%"
    :before-close="handleWeightClose"
  >
    <div class="weight-box">
      <span class="title">权重：</span>
      <el-input v-model="state.weightForm.pw" placeholder="请输入"></el-input>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleWeight">确定</el-button>
        <el-button type="primary" @click="handleWeightClose">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import importFile from './importFile.vue'
import ParamsImpotDialog from './c-cpns/params-impot-dialog.vue'
import ParamsConfigPlan from './c-cpns/params-config-plan.vue'
import station from './station.vue'
import configParagm from './configParagm.vue'
import { onUnmounted, reactive, ref } from 'vue'
import pagiNation from '@/components/app-pagination/pagination.vue'
import {
  getXajUnitPP,
  getXajRiverParams,
  getXajInfo,
  getXajParamSchemes,
  getXajEvolTopology,
  getXajRainSites,
  createConfig,
  delConfig,
  updateXajRainPw,
  saveXajParamsScheme,
  saveXajParams
} from '@/services/modules/model-config'
import emitter from '@/utils/bus'
import { ElMessage, ElMessageBox } from 'element-plus'

const props = defineProps({
  modelobj: {
    type: Object,
    default: () => {}
  }
})
const paramsConfigPlanRef = ref(null)
const paramsImpotDialogRef = ref(null)
const editorRef = ref(null)
const weightVal = ref(false)
const blkcd = ref(0)
const paraId = ref({})
const paramsSchemeArr = ref([])
let showStationDialog = ref(false)
const selectStation = () => {
  showStationDialog.value = true
}
let showDialog = ref(false)
// 导入参数弹框
const handleImportParams = (val) => {
  paramsImpotDialogRef.value.handleOpenModal(val, props.modelobj.id)
}
// 打开修改权重弹框
const handleSettongWeight = (item) => {
  weightVal.value = true
  state.weightForm.pw = item.pw
  state.weightForm.id = item.id
}
//编辑新建参数
function handleEditParamsConfig(val) {
  state.schemeId = state.schemeName
  if (val == 1) {
    state.schemeId = ''
  }
  // 打开弹框传递名称和备注
  if (state.schemeId) {
    paramsConfigPlanRef.value.handleOpenModal(state.schemeNameId, state.back)
  } else {
    paramsConfigPlanRef.value.handleOpenModal('', '')
  }

  // newConfig.value = 1
  // newConfigName.value = state.schemeNameId
}
// 修改权重
const handleWeight = () => {
  state.weightForm.pw = parseFloat(state.weightForm.pw)

  updateXajRainPw(state.weightForm).then((res) => {
    if (res.code == 200) {
      ElMessage({
        type: 'success',
        message: '修改成功'
      })
      weightVal.value = false
      handleClickUnit(state.itemObj, currentCd)
    }
  })
}
// 关闭修改权重弹框
const handleWeightClose = () => {
  weightVal.value = false
  state.weightForm.pw = ''
  state.weightForm.id = ''
}
// function handleClick() {}
// const handleAdd = () => {
//   showDialog.value = true
// }
const closeDig = (v) => {
  showDialog.value = v
  showStationDialog.value = v
}
const siteInfo = ref([]) //选择的站点
//选择站点
const handleSelect = (item) => {
  let _arr = JSON.parse(JSON.stringify(item))
  let _info = []
  for (let i = 0; i < _arr.length; i++) {
    _info.push({
      stcd: _arr[i].id
    })
  }
  siteInfo.value = _info
  state.rainTableData = _arr
}
let page = reactive({
  pageNum: 1, //当前页
  pageSize: 4, //每页条目数
  total: 24 // 记录总数
})
const activePlan = ref('first')
const activeParams = ref('first')
let textarea = reactive({
  text: ''
})
const currentCd = ref(0) //默认选中计算单元
const currentUnit = ref(0)
const currentRiver = ref(0)
const newConfig = ref(0)
const newConfigName = ref('')
const state = reactive({
  paramsFlag: false,
  blkcd: '', //断面Id
  schemeName: '',
  upSectionArr: [], //入流信息
  rainTableData: [], //雨量计算单元
  unitTableData: [], //计算单元信息
  paramsOptions: [], //方案
  unitParams: {}, //产汇流参数
  riverParams: {}, //河道演进参数
  outParams: {},
  inParams: {},
  schemeNameId: '',
  // 修改权重参数
  weightForm: { pw: '', id: '' },
  // 保留的点击计算单元编码
  itemObj: {}
})
emitter.on('secInfo', async (value) => {
  paraId.value = {
    blkcd: value.blkcd,
    id: value.id,
    paramsInfo: state.schemeName
  }
  blkcd.value = value.blkcd
  await getXajInfo({ blkcd: value.blkcd, mid: props.modelobj.id }).then((res) => {
    if (res.code === 200) {
      state.unitTableData = res.data
      /* state.schemeName = res.data.paramsSchemes[0].schemeName
      state.unitParams = res.data.unitParams
      state.riverParams = res.data.riverParams
      state.upSectionArr = res.data.upSection
      state.blkcd = res.data.blkcd */
    }
  })
  await paramSchemes(value.blkcd)
  await handleClickUnit(state.unitTableData[0], 0)
  // await handleClickCd(state.unitTableData[0], 0)
  // await handleClickRiver(state.upSectionArr[0], 0)
})
onUnmounted(() => {
  emitter.off('secInfo')
})
//新建模型参数
function handleAddParams() {
  state.paramsFlag = true
  emitter.emit('openDisabled', false)
}
//取消模型参数
function handleCloseParams() {
  state.paramsFlag = false
  emitter.emit('openDisabled', true)
}
//编辑模型参数
function handleEditParams() {
  emitter.emit('openDisabled', false)
  state.paramsFlag = true
}
//保存模型参数
function handleSaveParams() {
  let _state = JSON.parse(JSON.stringify(editorRef.value.state))
  let _params = {
    scid: state.schemeName,
    blkcd: blkcd.value, //预报断面编码
    params: {
      clParams: _state.unitParams,
      hlParams: _state.riverParams,

      evolParams: {
        unitEvol: _state.unitTableData.map((item) => {
          return { ...item, inCode: item.clcd }
        }),
        inEvol: _state.upSectionArr.map((item) => {
          return { ...item, inCode: item.fcd }
        })
      }
    }
  }
  _params.params.clParams.id = undefined
  _params.params.clParams.blkcd = undefined
  _params.params.clParams.paramsType = undefined
  _params.params.clParams.scid = undefined
  _params.params.hlParams.id = undefined
  _params.params.hlParams.blkcd = undefined
  _params.params.hlParams.paramsType = undefined
  _params.params.hlParams.scid = undefined
  saveXajParams(_params).then((res) => {
    if (res.code === 200) {
      state.paramsFlag = false
      emitter.emit('openDisabled', true)
      ElMessage({
        type: 'success',
        message: '保存成功'
      })
    }
  })
}
//定位
function handleClickPosition(item) {
  emitter.emit('positionPartUnit', item)
}
//编辑
function handleEdit() {
  newConfig.value = 1
  newConfigName.value = state.schemeNameId
  emitter.emit('openDisabled', false)
}
//新建配置
function handleCreated() {
  newConfig.value = 1
  // state.rainTableData = []
  // 点击新建去掉id
  state.schemeName = ''
  newConfigName.value = ''
  // emitter.emit("createConfig", {});
  // emitter.emit("openDisabled", false);
}
//取消配置
function handleClosed() {
  newConfig.value = 0
  // state.rainTableData = [];
  changeVal(state.paramsOptions[0]?.id)
  // emitter.emit("createConfig", {});
  // emitter.emit("openDisabled", true);
}
//保存saveConfig
const saveConfig = (form) => {
  console.log('保存saveConfig')
  console.log('editorRef.value.xxxx:', JSON.parse(JSON.stringify(editorRef.value.state)))
  let _params = {}
  let _state = JSON.parse(JSON.stringify(editorRef.value.state))
  if (state.schemeId) {
    _params = {
      id: state.schemeName,
      scName: form.newConfigName,
      back: form.back,
      mid: props.modelobj.id,
      blkcd: blkcd.value //预报断面编码
      // unitRainSites: [
      //   {
      //     clcd: state.unitTableData[0]?.clcd,
      //     sites: siteInfo.value,
      //   },
      // ],
      // params: {
      //   clParams: _state.unitParams,
      //   hlParams: _state.riverParams,

      //   evolParams: {
      //     unitEvol: _state.unitTableData.map((item) => {
      //       return { ...item, inCode: item.clcd };
      //     }),
      //     inEvol: _state.upSectionArr.map((item) => {
      //       return { ...item, inCode: item.fcd };
      //     }),
      //   },
      // },
    }
  } else {
    _params = {
      scName: form.newConfigName,
      back: form.back,
      mid: props.modelobj.id,
      blkcd: blkcd.value //预报断面编码
    }
  }
  console.log(JSON.stringify(_params), '666')
  saveXajParamsScheme(_params).then((res) => {
    if (res.code === 200) {
      newConfig.value = 0
      paramSchemes(blkcd.value)
      changeVal(state.schemeName)
      ElMessage({
        type: 'success',
        message: '保存成功'
      })
    }
  })
  // createConfig(_params).then((res) => {
  //   if (res.code === 200) {
  //     ElMessage({
  //       type: "success",
  //       message: "配置成功",
  //     });
  //     newConfig.value = 0;
  //     paramSchemes(blkcd.value);
  //     // 保存成功后禁用input
  //     emitter.emit("openDisabled", true);
  //   }
  // });
}
//删除配置
const delBtn = () => {
  ElMessageBox.confirm('此操作将永久删除该方案, 是否继续?', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      delConfig({
        id: state.schemeName
      }).then((res) => {
        if (res.code === 200) {
          ElMessage({
            type: 'success',
            message: '删除成功'
          })
          paramSchemes(blkcd.value)
        }
      })
    })
    .catch(() => {})
}
//改变
function changeVal(value) {
  state.schemeName = value
  let arr = state.paramsOptions.filter((item) => {
    return item.id == value
  })
  state.schemeNameId = arr[0].scName
  state.back = arr[0].back
  emitter.emit('paramsDetail', value)
  handleClickUnit(state.unitTableData[0], 0)
}
//新安江参数方案下拉框绑定
function paramSchemes(blkcd) {
  getXajParamSchemes({ blkcd: blkcd, mid: props.modelobj.id }).then((res) => {
    if (res.code === 200 && res.data.length > 0) {
      state.paramsOptions = res.data
      state.schemeName = res.data[0]?.id
      changeVal(res.data[0]?.id)
      handleClickUnit(state.unitTableData[0], 0)
    }
  })
}
//点击计算单元编码
function handleClickUnit(item, index) {
  state.itemObj = item
  currentCd.value = index
  getXajRainSites({ scid: state.schemeName, clcd: item.clcd }).then((res) => {
    if (res.code === 200 && res.data) {
      // res.data = res.data.filter((e) => {
      //   return e.clcd === item.clcd
      // })
      if (res.data.length > 0) {
        state.rainTableData = res.data
        // for (let i = 0; i < state.rainTableData.length; i++) {
        //   state.rainTableData[i].clcd = res.data[0].clcd
        // }
      } else {
        state.rainTableData = []
      }
    }
  })
}
//
function handleClickCd(item, index) {
  currentUnit.value = index
  console.log(5)
  getXajRiverParams({ blkcd: item.blkcd, inCode: item.clcd }).then((res) => {
    if (res.code === 200) {
      state.outParams = res.data
    }
  })
}
function handleClickRiver(item, index) {
  currentRiver.value = index
  console.log(6)
  getXajRiverParams({ blkcd: state.blkcd, inCode: item.inBlkcd }).then((res) => {
    if (res.code === 200) {
      state.inParams = res.data
    }
  })
}
</script>
<style lang="less" scoped>
.weight-box {
  display: flex;
  align-items: center;
  .title {
    // width: 80px;
  }
  :deep(.el-input) {
    width: 80%;
  }
}
.river-top {
  width: 100%;
  height: 200px;
  padding: 5px 0px;
  font-size: var(--content-fontsize);
  box-sizing: border-box;
  .river-top-head {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 35px;
    .title-font {
      color: #409eff;
    }
    .top-btn-box {
      .btn-item {
        margin-right: 40px;
      }
      // .structure-unit {
      //   background-color: #0054db;
      // }
      // .Import-unit {
      //   background-color: #70b603;
      // }
      // .save-unit {
      //   background-color: #169bd5;
      // }
    }
  }
  .river-top-list {
    // height: 200px;
    // padding: 0 20px;
    margin-top: 7px;
    .table-box {
      width: 100%;
      height: 165px;
    }
    .page-box {
      display: flex;
      // justify-content: end;
      justify-content: flex-end;
      align-items: center;
      height: calc(100% - 205px);
      border-bottom: 1px solid rgb(163, 163, 163);
    }
  }
}
.river-bottom {
  width: 100%;
  // height: 455px;
  height: calc(100% - 250px);
  padding: 5px 0px;
  box-sizing: border-box;
  font-size: var(--content-fontsize);

  .title-font {
    margin-top: 10px;
    display: block;
    height: 35px;
    line-height: 35px;
    color: #409eff;
    // color: var(--fold-word-color);
  }
  .config-box {
    height: calc(100% - 35px);
    // padding: 0px 20px;
    .config-box-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 35px;
      width: 100%;
      .config-plan-left {
        display: flex;
        align-items: center;
        .el-select {
          width: 300px;
        }
        .config-plan-title {
          margin-right: 15px;
          text-align: end;
          width: 120px;
        }
        .plan-option {
          margin-left: 5px;
          color: #0054db;
          cursor: pointer;
        }
      }
      .config-plan-right {
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .btn-pading {
          margin-right: 15px;
        }
      }
    }
    .head-othe {
      margin-top: 10px;
    }
    .config-tabs {
      box-sizing: border-box;
      margin-top: 15px;
      height: calc(100% - 115px);
      .btn-box {
        text-align: right;
      }
      :deep(.el-textarea) {
        height: 100%;
        .el-textarea__inner {
          height: 100%;
        }
      }
      :deep(.el-tabs) {
        height: 100%;
        .el-tabs__content {
          height: calc(100% - 55px);
          // padding: 10px;
          .el-tab-pane {
            height: 100%;
          }
        }
      }
      .rainfall-config-box {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        .rain-left {
          height: 100%;
          width: 180px;
          .computed-title {
            height: 40px;
            line-height: 40px;
            text-align: center;
            background-color: #f2f2f2;
          }
          .computed-main {
            overflow-y: auto;
            height: calc(100% - 40px);
            background: #d7d4d427;
            .unit-item {
              display: flex;
              align-items: center;
              justify-content: space-around;
              height: 40px;
              &.active {
                background-color: #f2f2f2;
                color: #0054db;
              }
              .basin-code {
                cursor: pointer;
              }
              .basin-location {
                cursor: pointer;
              }
            }
          }
        }
        .rain-right {
          height: 100%;
          width: calc(100% - 190px);

          .rainfall-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 35px;
            padding: 0 20px;
            line-height: 35px;
            box-sizing: border-box;
            color: #409eff;
          }
          .rainfall-table-box {
            height: calc(100% - 35px);
            padding: 10px;
            box-sizing: border-box;
          }
        }
      }
      .model-parameter {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        padding: 0 5px;
        box-sizing: border-box;
        :deep(.el-textarea__inner) {
          resize: none;
        }
        .confluence-box {
          width: 320px;
          height: 100%;
          .confluence-title {
            display: inline-block;
            height: 20px;
            font-weight: 600;
          }
          .confluence-main {
            display: flex;
            justify-content: space-between;
            height: calc(100% - 230px);
            padding: 0 10px;
            margin-top: 5px;
            box-sizing: border-box;
            &.w200 {
              height: calc(100% - 400px);
            }
            .parameter-model {
              width: 48%;
              .parameter-model-title {
                display: block;
                height: 25px;
                line-height: 25px;
              }
              .parameter-model-text {
                width: 100%;
                height: calc(100% - 45px);
                margin-top: 5px;
              }
            }
            .parameter-explain {
              width: 48%;
              .parameter-explain-title {
                display: block;
                height: 25px;
                line-height: 25px;
              }
              .parameter-explain-text {
                width: 100%;
                height: calc(100% - 45px);
                margin-top: 5px;
              }
            }
          }
        }
        .evolution-box {
          width: calc(100% - 330px);
          height: 100%;
          .evolution-title {
            display: inline-block;
            height: 20px;
            font-weight: 600;
          }
          .evolution-main {
            height: calc(100% - 25px);
            padding: 0 10px;
            box-sizing: border-box;
            margin-top: 10px;
            .evolution-main-top {
              display: flex;
              justify-content: space-between;
              height: 100px;
              .river-params {
                width: 43%;
                .river-params-title {
                  display: block;
                  height: 20px;
                }
                .river-params-text {
                  height: 82px;
                }
              }
              .params-explain {
                width: 55%;
                .params-explain-title {
                  display: block;
                  height: 20px;
                }
                .params-explain-text {
                  height: 82px;
                }
              }
            }
            .evolution-main-bottom {
              height: calc(100% - 20px);
              .el-tabs__header {
                margin-bottom: 0px;
              }
              .unit-section {
                display: flex;
                justify-content: space-between;
                height: calc(100% - 15px);
                .river-course {
                  width: 47%;
                  height: 100%;
                  .computed-title {
                    display: flex;
                    justify-content: space-between;
                    height: 20px;
                    line-height: 20px;
                    padding: 0 8px;
                    background-color: #f2f2f2;
                  }
                  .river-course-title {
                    width: 100%;
                    height: 20px;
                    background-color: #f2f2f2;
                    line-height: 20px;
                    text-align: center;
                  }
                  .river-course-main {
                    overflow-y: auto;
                    height: calc(100% - 10px);
                    background: #d7d4d427;
                    .river-item {
                      display: block;
                      height: 30px;
                      width: 100%;
                      line-height: 30px;
                      text-align: center;
                      cursor: pointer;
                      &.active {
                        background: #f2f2f2;
                        color: #0054db;
                      }
                    }
                    .computed-item {
                      display: flex;
                      justify-content: space-between;
                      height: 25px;
                      padding: 2px 10px;
                      line-height: 25px;
                      text-align: center;
                      cursor: pointer;
                      &.active {
                        background: #f2f2f2;
                        color: #0054db;
                      }
                      .computed-item-name {
                        width: 60px;
                        display: inline-block;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                      }
                    }
                  }
                }
                .bottom-model-params {
                  width: 50%;
                  height: 100%;

                  .model-title {
                    display: block;
                    height: 20px;
                  }
                  .model-params {
                    height: calc((100% - 28px) / 2);
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
